<template>
  <div class="keyWork-list-wrap">
    <Navbar title="重点工作" />
    <div class="flex items-center search-wrap">
      <div class="search-bar" @click="handleSearch">
        <img src="@/views/video-zone/assets/search.png" />
        <span> 搜索 </span>
      </div>
      <TypeFilter :now-type="workStatus" :select-list="STATUS_TYPE_LIST" @change="workStatusChange"></TypeFilter>
      <TypeFilter :now-type="ddl" :select-list="ddlList" @change="ddlChange"></TypeFilter>
      <TypeFilter :now-type="deptName" :select-list="deptList" @change="deptNameChange"></TypeFilter>
    </div>
    <div class="content">
      <work-item
        v-for="item in list"
        :key="item.id"
        :item="item"
      />
      <van-empty v-if="!list || !list.length" description="没有重点工作信息" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from '@/components/Navbar/index.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import keyWorkServe from '@/api/keyWork.ts'
import WorkItem from './components/workItem.vue'
import TypeFilter from './components/typeFilter.vue'
import { WORK_TYPE_LIST as STATUS_TYPE_LIST } from './constants.ts'

const workStatus = ref(null)
const ddl = ref(null)
const deptName = ref(null)
const list = ref([])
const deptList = ref([
  {
    name: "主办单位",
    value: null
  }
])
const ddlList = ref([
  {
    name: "时限",
    value: null
  }
])

const getData = () => {
  let params: any = {
    workStatus: workStatus.value,
    ddl: ddl.value,
    deptName: deptName.value
  }
  keyWorkServe.focusWorkList(params).then(res=>{
    list.value = res.data
  })
}
getData()

const getDeptList = () => {
  keyWorkServe.focusWorkSelectionList().then(res=>{
    res.data.deptList.forEach(ele=>{
      deptList.value.push({
        name: ele,
        value: ele
      })
    })
    res.data.ddlList.forEach(ele=>{
      ddlList.value.push({
        name: ele,
        value: ele
      })
    })
  })
}
getDeptList()

const workStatusChange = (data) => {
  workStatus.value = data
  getData()
}

const ddlChange = (data) => {
  ddl.value = data
  getData()
}

const deptNameChange = (data) => {
  deptName.value = data
  getData()
}

const router = useRouter()
const handleSearch = () => {
  router.push('/keyWork/search')
}
</script>

<style scoped lang="less">
.keyWork-list-wrap{
  .search-bar {
    border-radius: 25px;
    background: #ffffff;
    height: 32px;
    width: 68px;
    display: flex;
    font-weight: medium;
    align-items: center;
    color: #0000007f;
    font-size: 13px;
    padding-left: 12px;
    margin-left: 10px;

    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
  .content {
    padding: 0px 12px;
    height: calc(100vh - 110px);
    overflow-y: scroll;
  }
}
</style>
